<template>
  <div class="network_set">
    <div class="tabs">
      <div
        v-for="tab in tabOptional"
        :key="tab.name"
        :class="{ tab_item: true, tab_item_active: tab.name === activeTab }"
        @click="handleSwitchTab(tab.name)"
      >
        <div class="tab_item_content">{{ tab.label }}</div>
      </div>
      <div class="active_tab" :style="{ top: activeTabStyle }">
        <div class="right_dot_container">
          <div class="bg"></div>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 服务商设置 -->
      <template v-if="activeTab === 'set'">
        <SetCard ref="setCard" />
      </template>
      <!-- 服务商分类 -->
      <template v-else-if="activeTab === 'type'">
        <NetworkType ref="networkType" />
      </template>
      <!-- 资质设置 -->
      <template v-else-if="activeTab === 'authentication'">
        <AuthenticationSettings ref="authentication" />
      </template>
      <!-- 自定义字段 -->
      <!-- <template v-else-if="activeTab === 'selfdefined'">
        <SelfDefined ref="selfdefined" />
      </template> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import SetCard from './components/SetCard/index.vue'
  import NetworkType from './components/networkType/index.vue'
  import AuthenticationSettings from './components/AuthenticationSettings/index.vue'
  import SelfDefined from './components/SelfDefined/index.vue'
  import { ref } from 'vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.networkSet,
  })

  // 服务商设置组件实例
  const setCard = ref<InstanceType<typeof SetCard> | null>(null)

  // 资质设置组件实例
  const selfdefined = ref<InstanceType<typeof SelfDefined> | null>(null)

  // 服务商类型组件实例
  const networkType = ref<InstanceType<typeof NetworkType> | null>(null)

  // 自定义字段组件实例
  const authentication = ref<InstanceType<typeof AuthenticationSettings> | null>(null)

  // 导航选项
  const tabOptional = ref([
    { name: 'set', label: '服务商设置' },
    // { name: 'authentication', label: '资质设置' },
    { name: 'type', label: '服务商分类' },
    { name: 'authentication', label: '服务商字段' },
    // { name: 'selfdefined', label: '自定义字段' },
  ])

  // 激活的tab
  const activeTab = ref('set')

  // active_tab样式
  const activeTabStyle = ref('14px')

  // tab切换事件
  const handleSwitchTab = (tab: string) => {
    activeTab.value = tab
    switch (tab) {
      case 'set':
        activeTabStyle.value = '14px'
        if (setCard.value) {
          setCard.value.getSet()
        }
        break
      case 'type':
        activeTabStyle.value = 'calc(14px + 5vh)'
        if (networkType.value) {
          networkType.value.getTeamList()
        }
        break
      case 'authentication':
        activeTabStyle.value = 'calc(14px + 10vh)'
        if (authentication.value) {
          authentication.value.getTeamList()
        }
        break
      case 'selfdefined':
        activeTabStyle.value = 'calc(14px + 15vh)'
        if (selfdefined.value) {
          selfdefined.value.getTeamList()
        }
        break
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
